<template>
    <view class="oreder-header">
        <search-bar :placeholderText="placeholderText" :actions="actions" @searchFn="searchFn" @actionFn="actionFn">
        </search-bar>
        <uni-calendar :date="filterData.startDate" ref="startDate" :insert="false" @confirm="confirmStarDate">
        </uni-calendar>
        <uni-calendar :date="filterData.endDate" ref="endDate" :insert="false" @confirm="confirmEndDate"></uni-calendar>

        <uni-drawer :width="320" ref="showRight" mode="right" :mask-click="true" class="drawer">
            <view class="drawer-view">
                <scroll-view class="drawer-scroll" scroll-y="true">
                    <view class="filter-item date-item">
                        <text class="label">订单时间</text>
                        <view class="filter-date">
                            <view class="filter-date-tag">
                                <uni-tag
                                    class="tag-item"
                                    :class="filterData.selectFilterOrderDate == item.id ? 'selected' : ''"
                                    inverted="true"
                                    :text="item.name"
                                    @click="bindClick(item)"
                                    v-for="(item, index) in filterOrderDates"
                                    :key="index"></uni-tag>
                            </view>
                        </view>
                        <view class="date-select">
                            <text
                                class="date-input"
                                :class="filterData.startDate == '' ? 'data-time-ccc' : ''"
                                @click="openStarDate"
                                >{{ filterData.startDate == "" ? "请选择时间" : filterData.startDate }}</text
                            >
                            <text class="to">至</text>
                            <text
                                class="date-input"
                                :class="filterData.endDate == '' ? 'data-time-ccc' : ''"
                                @click="openEndDate"
                                >{{ filterData.endDate == "" ? "请选择时间" : filterData.endDate }}</text
                            >
                        </view>
                    </view>
                </scroll-view>
                <view class="drawer-bottom-bar">
                    <button class="btn btn-reset" @click="cancelFilter">
                        <text>重置</text>
                    </button>
                    <button class="btn btn-set" @click="doFilter">
                        <text>确定</text>
                    </button>
                </view>
            </view>
        </uni-drawer>
    </view>
</template>

<script>
import searchBar from "@/components/common/search-bar.vue"
import { getElementTop } from "@/uni-sub-base/utils/elementUtil.js"
import utilsOld from "@/utils/utilsOld.js"
export default {
    props: {
        isReturn: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        "search-bar": searchBar,
    },
    data() {
        return {
            actions: [
                {
                    type: "icon-shaixuan",
                    id: 1,
                },
            ],
            placeholderText: "快速查找订单",
            isShowFilter: false,
            searchValue: "",
            filterOrderTypes: [
                {
                    id: "0",
                    name: "快递物流",
                },
                {
                    id: "1",
                    name: "商家配送",
                },
                {
                    id: "2",
                    name: "自提",
                },
            ],

            filterOrderDates: [
                {
                    id: 0,
                    name: "今日",
                },
                {
                    id: 1,
                    name: "本周",
                },
                {
                    id: 2,
                    name: "本月",
                },
                {
                    id: 3,
                    name: "本年",
                },
            ],
            filterData: {
                selectFilterOrderType: "-1",
                selectFilterOrderDate: -1,
                startDate: "",
                endDate: "",
            },
            popTop: 0,
        }
    },
    mounted() {
        if (this.isReturn) {
            this.placeholderText = "快速查找订单"
        }
    },
    methods: {
        searchFn(searchText) {
            //搜索
            this.$emit("searchFn", searchText)
        },
        actionFn(actionItem) {
            //功能点击
            if (actionItem.id == 1) {
                this.filterOpen()
            }
        },
        filterAction() {
            //弹出、关闭筛选
            this.isShowFilter = !this.isShowFilter
            // if (this.isShowFilter) {
            // 	this.$refs.filterPopup.close()
            // } else {
            // 	this.$refs.filterPopup.open()
            // }
        },
        changeFilterPopup(value) {
            //弹出、关闭筛选回调
            this.isShowFilter = value.show
        },
        changeSearchValue(value) {
            //搜索关键字回调
            this.searchValue = value
        },
        bindClick(item) {
            //选择范围
            this.filterData.selectFilterOrderDate = item.id
            switch (item.id) {
                case 0:
                    //今日
                    this.filterData.startDate = utilsOld.today().startDate
                    this.filterData.endDate = utilsOld.today().endDate
                    break
                case 1:
                    //本周
                    this.filterData.startDate = utilsOld.thisWeek().startDate
                    this.filterData.endDate = utilsOld.thisWeek().endDate
                    break
                case 2:
                    //本月
                    this.filterData.startDate = utilsOld.thisMonth().startDate
                    this.filterData.endDate = utilsOld.thisMonth().endDate
                    break
                case 3:
                    //本年
                    this.filterData.startDate = utilsOld.thisYear().startDate
                    this.filterData.endDate = utilsOld.thisYear().endDate
                    break
                default:
                    break
            }
        },
        getString(value) {
            //转为string
            return value.toString()
        },
        openStarDate() {
            //打开选择开始日期
            this.$refs.startDate.open()
        },
        confirmStarDate(e) {
            //选择开始日期
            this.filterData.startDate = e.fulldate
        },
        openEndDate() {
            //打开选择结束日期
            this.$refs.endDate.open()
        },
        confirmEndDate(e) {
            //选择结束日期
            this.filterData.endDate = e.fulldate
        },
        cancelFilter() {
            //重置筛选
            this.filterData = {
                selectFilterOrderType: "-1",
                selectFilterOrderDate: -1,
                startDate: "",
                endDate: "",
            }
        },
        doFilter() {
            //提交筛选
            this.$emit("doFilter", this.filterData)
            this.isShowFilter = false
			this.filterClose()
        },
        changeAccountPayType(id) {
            //选择类型
            if (this.filterData.selectFilterOrderType != id) {
                this.filterData.selectFilterOrderType = id
            }
        },
        filterOpen() {
            this.$refs.showRight.open()
        },
        filterClose() {
            this.$refs.showRight.close()
        },
    },
}
</script>

<style lang="scss">
.filter-main {
    display: flex;
    flex: 1;
    background: $color-white;
    padding: $app-page-padding;
    flex-direction: column;

    .filter-item {
        margin-bottom: 30rpx;

        .item-title {
            margin-bottom: 30rpx;
        }
    }

    .filter-date-tag {
        margin-bottom: 50rpx;
        display: flex;
        flex-direction: row;

        .tag-item {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            margin-left: 30rpx;

            &:first-child {
                margin-left: 0;
            }
        }

        .selected {
            text {
                color: $app-color-main;
                border: 1rpx solid $app-color-main;
            }
        }
    }

    .filter-date-time {
        display: flex;
        flex-direction: row;
        padding-bottom: 30rpx;
        border-bottom: solid 1rpx $uni-bg-color-grey;

        .date-time {
            display: flex;
            flex: 1;
            justify-content: center;
            font-size: 28rpx;
            color: #000000;
        }
        .data-time-ccc {
            color: $app-color-text-tip;
        }
    }

    .radio-group {
        display: flex;
        flex-direction: row;
        align-items: center;

        .radio-label {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-right: 20rpx;

            .radio {
                transform: scale(0.8);
            }
        }
    }
}
.filter-action .btn {
    font-size: 28rpx;
}
.date-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100rpx;
    .date-input {
        flex: 1;
        display: flex;
        justify-content: center;
        border-bottom: solid 1rpx $border;
        padding-bottom: 16rpx;
    }
    .to {
        margin: 0 20rpx;
    }
}
.drawer {
    z-index: 100 !important;
}
.filter-date-tag {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row;

    .tag-item {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        margin-left: 30rpx;
		white-space: nowrap;
        &:first-child {
            margin-left: 0;
        }
    }

    .selected {
            color: $app-color-main;
            border: 1rpx solid $app-color-main;
    }
}
</style>
